<template>
    <view class="page">
        <view class="formBox bg-fff boxShow">
            <view class="title font15 fontBold">意向楼盘（选填）</view>
            <view class="col-grey font13 top-10">选择意向楼盘，可联系对应销售顾问，专业对答</view>
            <view class="searchInp flex top-10">
                <block v-if="thisProduct.id">
                    <view class="product" @click="displayPopou">
                        <text class="col-grey">{{thisProduct.title}}</text>
                    </view>
                    <u-icon name="close" color="#333333" size="14" @click="thisProduct = {}"></u-icon>
                </block>
                <block v-else>
                    <view class="product" @click="displayPopou">
                        <text class="col-grey">请选择楼盘</text>
                    </view>
                    <u-icon name="arrow-right" color="#333333" size="14"></u-icon>
                </block>
            </view>
        </view>
        
        <view class="bottom bg-fff">
            <button class="nextBtn clearBtn" @click="confirmForm">提交</button>
        </view>
        <u-popup v-model="showSearchPopup" mode="bottom">
            <view class="popupContent">
                <u-search placeholder="输入楼盘名称" :focus="searchFocus" height="35" margin="28rpx 20rpx 0rpx 28rpx" :action-style="actionSty" shape="square" v-model="searchVal" @change="changeInput"></u-search>
                <scroll-view scroll-y="true" class="productsScroll">
                    <view v-if="productList.length>0">
                        <block v-for="(item, index) in productList" :key="index">
                            <view class="productItm" @click="bindHandleProduct(item)">
                                {{item.title}}
                            </view>
                        </block>
                    </view>
                </scroll-view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState, mapActions } from 'pinia';
    import { useUserInfoStore, useIndexStore } from '@/store/index';
    import { searchFAQProduct, createFAQ } from '@/common/api/forum';
	export default {
        data() {
            return {
                content: '',
                tags: [],
                showSearchPopup: false,
                searchVal: '',
                searchFocus: false,
                actionSty: {
                    color: '#007235'
                },
                productList: [],
                thisProduct: {}
            }
        },
        computed: {
        	...mapState(useUserInfoStore, ['userInfo']),
            ...mapState(useIndexStore, ['nowCityCode', 'cityList'])
        },
        onLoad(options){
            let { info={} } = options;
            let props = JSON.parse(decodeURIComponent(info));
            this.content = props.content;
            this.tags = props.tags;
            uni.hideShareMenu();
            const that = this;
            uni.$check_and_login(function (){
                that.changeInput()
            })
        },
        
        methods: {
            ...mapActions(useIndexStore, ['setUpdateForum']),
            
            //显示搜索楼盘popup
            displayPopou() {
                this.showSearchPopup = true;
                this.searchFocus = true;
            },
            
            //搜索楼盘
            changeInput(value='') {
                const that = this;
                this.$u.throttle(function() {
                    searchFAQProduct({
                        cityCode: that.nowCityCode,
                        keyword: value
                    }).then(res => {
                        if(res.status == 0) {
                            that.productList = res.detail.results;
                        }else {
                            uni.$u.toast(res.detail);
                        }
                    })
                }, 200)
            },
            
            //选择指定楼盘
            bindHandleProduct(info) {
                this.thisProduct = info;
                this.showSearchPopup = false;
            },
            
            //提交
            confirmForm() {
                uni.showLoading({
                    title: '提交中'
                })
                let tags = this.tags.map(item => (item.name));
                createFAQ({
                    city_code: this.nowCityCode,
                    product: this.thisProduct.id?this.thisProduct.id:'',
                    content: this.content,
                    tags
                }).then(res => {
                    if(res.status == 0) {
                        uni.hideLoading();
                        this.setUpdateForum(true);
                        uni.navigateTo({
                            url: '/pages/houses/forum/question/question-publish-success'
                        })
                    }else {
                        uni.hideLoading();
                        uni.$u.toast(res.detail);
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .page{
        min-height: 100vh;
        overflow: hidden;
        position: relative;
        .formBox{
            border-radius: 20rpx;
            overflow: hidden;
            margin: 28rpx;
            padding: 28rpx;
            .searchInp{
                justify-content: space-between;
                height: 70rpx;
                line-height: 70rpx;
                padding: 0 20rpx;
                border-radius: 10rpx;
                border: 2rpx solid rgba(0,0,0,.07);
                .product{
                    width: calc(100% - 70rpx);
                }
            }
        }
        .bottom{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 10;
            .nextBtn{
                font-size: 28rpx;
                height: 80rpx;
                line-height: 80rpx;
                color: #FFFFFF;
                background-color: $theme-color;
                margin: 20rpx 28rpx 50rpx 28rpx;
            }
        }
        .popupContent{
            .productsScroll{
                height: 50vh;
                .productItm{
                    height: 90rpx;
                    line-height: 90rpx;
                    padding: 0rpx 28rpx;
                    border-bottom: 2rpx solid rgba(0,0,0,.07);
                }
            }
        }
    }
</style>